<template>
	<NodeWrapper
		:containerStyle="containerStyle"
		:properties="props.properties"
		shape="circular"
		class="baseNodeContainer"
	>
		<a-row>
			<a-col :span="6">
				<a-avatar
					:src="'data:image/svg+xml;base64,' + props.properties.component.icon"
					style="width: 1em; height: 1em"
				/>
			</a-col>
			<a-col :span="18" class="ellipsis">
				<!-- <a-tooltip :title="props.properties?.basicConfig?.remark||props.text"> -->
					{{ props.properties?.basicConfig?.remark||props.text }}
				<!-- </a-tooltip> -->
			</a-col>
		</a-row>
	</NodeWrapper>
</template>

<script setup>
import { defineProps, onMounted, getCurrentInstance } from 'vue'
import { StepForwardOutlined } from '@ant-design/icons-vue'
import NodeWrapper from './nodeWrapper.vue'

const props = defineProps(['model', 'graphModel', 'isSelected', 'isHovered', 'disabled', 'properties', 'text'])

const containerStyle = {
	width: props.model?._width + 'px',
	height: props.model?._height + 'px',
	borderRadius: '50%',
	display: 'flex',
	'justify-content': 'center',
	'align-items': 'center'
}
</script>

<style scoped lang="less">
.baseNodeContainer {
	background-color: goldenrod;
	border: 1px solid #40a9ff;
	color: black;

}

.ellipsis {
	white-space: nowrap; /* 确保文本在一行内显示 */
	overflow: hidden; /* 隐藏溢出的内容 */
	text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}
</style>
